<template>
	<view class="inventory-lists">
		<view class="inventory-top">
			<view class="num">序号</view>
			<view class="name">名称</view>
			<view class="keshi">科室</view>
			<view class="location">位置</view>
			<view class="species">消耗种类</view>
			<view class="time">时间</view>
			<view class="type">业务</view>
			<view class="porper">人员</view>
		</view>
		<view class="inventory-center">
			<scroll-view scroll-y="true" class="scroll-list" @scrolltolower="$emit('onDropLoad')">
				<block v-for="(list,index) in List" :key="index">
					<view class="ic-item" v-if="list.datetime!==0" @tap="$emit('onDetails',index)">
						<view class="num">{{numIndex(index)}}</view>
						<view class="name">{{list.itemName}}</view>
						<view class="keshi">{{list.operatorDept}}</view>
						<view class="location">{{list.seatCode}}</view>
						<view class="species">{{list.itemTypeName}}</view>
						<view class="time">{{list.operTime}}</view>
						<view class="type">
							<text v-show="list.bizType==1" class="type-type" :class="{'orange':list.bizType==2,'blue':list.bizType==3}">上架</text>
							<text v-show="list.bizType==2" class="type-type" :class="{'orange':list.bizType==2,'blue':list.bizType==3}">领用</text>
							<text v-show="list.bizType==3" class="type-type" :class="{'orange':list.bizType==2,'blue':list.bizType==3}">退回</text>
							<image v-show="list.bizType==2" class="type-img" src="../../static/images/inventory/duobianx1.png" mode="widthFix"></image>
							<image v-show="list.bizType==3" class="type-img" src="../../static/images/inventory/duobianx2.png" mode="widthFix"></image>
						</view>
						<view class="porper">{{list.operatorName}}</view>
					</view>
					<view v-else class="ic-item"></view>
				</block>
				<block v-if="loading!=''">
					<view v-show="List.length>=11" class="load-more">{{loading}}</view>
				</block>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			List: {
				type: Array,
				required: true
			},
			loading:{
				type:String,
				default: ''
			}
		},
		data() {
			return {}
		},
		computed:{
			numIndex: function() {
				return function(index){
					let i = index+1
					if(i<10){
						return '0'+i
					}else{
						return i
					}
				}
			}
		},
		methods: {}
	}
</script>

<style scoped lang="less">
.orange{
	color: #FA8647;
}
.blue{
	color: #4F9AFF;
}
.scroll-list{
	height: 100%;
}
// .inventory-lists{
// 	// width: 2796rpx;
// 	height: 100%;
// 	position: fixed;
// }
.inventory-top{
	width: 100%;
	// height: 84rpx;
	height: 5.5vh;
	background: #D4E6FF;
	border-radius: 32rpx 32rpx 0px 0px;
	display: flex;
	align-items: center;
	font-size: 36rpx;
	color: #4F9AFF;
	text-align: center;
	box-sizing: border-box;
}
.inventory-center{
	width: 100%;
	// height: 1078rpx;
	height: 70.5vh;
	background: #FFFFFF;
	// overflow-y: auto;
	box-sizing: border-box;
	// -webkit-overflow-scrolling: touch;
	// //当手指从触摸屏移开，会保持滑动一段距离
	// -webkit-overflow-scrolling: auto; // ios默认属性
	// //当手指从触摸屏移开，滚动立即停止
	.ic-item{
		width: 100%;
		// height: 100rpx;
		height: 6.5vh;
		display: flex;
		align-items: center;
		font-size: 40rpx;
		color: #515151;
		text-align: center;
		// &:nth-child(2n){
		// 	background: #E8F2FF;
		// }
	}
}
.num{
	// width: 140rpx;
	// margin-right: 40rpx;
	    width: 4.8vw;
	    margin-right: 1.4vw;
}
.name{
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	// width: 700rpx;
	// margin-right: 40rpx;
	width: 24vw;
	margin-right: 1.4vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

}
.keshi{
	// width: 250rpx;
	// margin-right: 40rpx;
	width: 8.5vw;
	margin-right: 1.4vw;
}
.location{
	// width: 360rpx;
	// margin-right: 40rpx;
	width: 12.5vw;
	margin-right: 1.4vw;
}
.species{
	// width: 270rpx;
	// margin-right: 40rpx;
	width: 9.5vw;
	margin-right: 1.4vw;
}
.time{
	// width: 440rpx;
	// margin-right: 40rpx;
	width: 15.3vw;
	margin-right: 1.4vw;
}
.type{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	// width: 160rpx;
	// margin-right: 40rpx;
	width: 5.5vw;
	margin-right: 1.4vw;
	.type-type{
		font-size: 40rpx;
		margin-left: 20rpx;
	}
	.type-img{
		width: 42rpx;
		height: 36rpx;
	}
}
.porper{
	// width: 250rpx;
	width: 8vw;
}
.load-more{
	text-align: center;
	color: #AAAAAA;
	padding: 10upx;
}
</style>
